<template>
    <div class="tip">
        <div class="department">
            <div class="department-top">
                <div class="left"><i class="ri-creative-commons-by-line"></i><span>常见科室</span></div>
                <div class="right"><span>全部</span><i class="ri-arrow-right-s-line"></i></div>
            </div>
            <div class="department-content">
                <div>神经内科</div>
                <div>消化内科</div>
                <div>呼吸内科</div>
                <div>内科</div>
                <div>神经外科</div>
                <div>妇科</div>
                <div>产科</div>
                <div>儿科</div>
            </div>
        </div>
        <div class="announcement">
            <div class="announcement-top">
                <div class="left">
                    <span><i class="ri-alarm-warning-line"></i>平台公告</span>
                </div>
                <div class="right"><span>全部</span><i class="ri-arrow-right-s-line"></i></div>
            </div>
            <ul class="announcement-content">
                <li>关于延长北京大学国际医院</li>
                <li>北京中医药大学东方医院部</li>
                <li>武警总医院号源暂停更新通知</li>
            </ul>
        </div>
        <div class="stop-anno">
            <div class="stop-anno-top">
                <div class="left">
                    <span><i class="ri-notification-line"></i>停诊公告</span>
                </div>
                <div class="right"><span>全部</span><i class="ri-arrow-right-s-line"></i></div>
            </div>
            <ul class="stop-anno-content">
                <li>中国人民解放军总医院第六</li>
                <li>首都医科大学附属北京路和</li>
                <li>中日友好医院中西结合心系</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import 'remixicon/fonts/remixicon.css'
</script>

<style lang="scss" scoped>
.tip{
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: rgb(87, 87, 87);
    ul{
        list-style-type: disc;
        list-style-position: inside;
        
        li{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        li:hover{
            color: skyblue;
            cursor: pointer;
        }
    }
    .department-top{
        display: flex;
        justify-content: space-between;
        .left:hover, .right:hover{
            color: skyblue;
            cursor: pointer;
        }
    }
    .department-content{
        display: flex;
        flex-wrap: wrap;
        margin:15px 0;
        div{
            width: 50%;
            margin: 5px 0;
        }
        div:hover{
            color: skyblue;
            cursor: pointer; 
        }
    }
    .announcement-top{
        display: flex;
        justify-content: space-between;
        .left:hover, .right:hover{
            color: skyblue;
            cursor: pointer;
        }
            
    }
    .announcement-content{
            margin: 15px 0;
            li{
                margin: 10px 0;
            }
            
        }
    .stop-anno-top{
        display: flex;
        justify-content: space-between;
        .left:hover, .right:hover{
            color: skyblue;
            cursor: pointer;
        }
    }
    .stop-anno-content{
        margin: 15px 0;
        li{
                margin: 10px 0;
            }
    }
}
</style>